<template>
  <div>
    <div class="section">
      <slider :slides="slides"></slider>
      <div class="announcement">
        <label>快讯</label>
        <span>{{announcement}}</span>
      </div>
    </div>
    <div class="section">
      <book-list heading="最新更新" :books="lastUpdated" @select="preview($event)"></book-list>
    </div>
    <div class="section">
      <book-list heading="编辑推荐" :books="recommended"></book-list>
    </div>

    <modal-dialog ref="dialog">
      <div slot="heading"></div>
      <div>
        <div v-if="selected">
          <h2>{{ selected.title }}</h2>
        </div>
      </div>
    </modal-dialog>
  </div>
</template>

<script>
import BookList from './books/List'
import ModalDialog from '../components/common/dialog'
import Slider from '../components/common/Slider'
import {mapActions} from 'vuex'
// import {mapGetters, mapState, mapActions} from 'vuex'

export default {
  name: 'Home',
  data () {
    return {
      selected: undefined
    }
  },
  components: {BookList, ModalDialog, Slider},
  methods: {
    preview (book) {
      this.selected = book
      this.$refs.dialog.open()
    },
    ...mapActions(['getStarted'])
  },
  created () {
    this.getStarted()
  // this.fake = FakeData.getHomeData()
  //            this.$http.get('/books/promotions', (res)=> {
  //                this.page_data = res.data
  //            }, (error)=> {
  //                // 处理出错信息
  //            })
  },
  mounted: function () {

  },
  computed: {
    announcement () {
      return this.$store.state.books.announcement
    },
    slides () {
      return this.$store.state.books.slides
    },
    lastUpdated () {
      return this.$store.state.books.lastUpdated
    },
    recommended () {
      return this.$store.state.books.recommended
    }
    // 用mapGetters简化上面被注释代码
    // ...mapGetters([
    //   'announcement',
    //   'slides',
    //   'lastUpdated',
    //   'recommended'
    // ]),
    // 用mapState将所有状态直接映射为计算属性
    // ...mapState([
    //   'announcement',
    //   'slides',
    //   'lastUpdated',
    //   'recommended'
    // ]),
    // 用mapGetters获取Getters的计算属性
    // ...mapGetters([
    //   'totalSlides'
    // ])
  }
}
</script>

<style scoped>
  .announcement {
    font-size: 12px;
    padding: 5px;
    background: #fff;
  }

  .announcement > label {
    padding: 3px 10px;
    margin: 3px 10px;
    background: #FACCB7;
    border-radius: 3px;
    color: #FF5102;

  }

  .announcement > span {
    padding: 3px 10px;
    color: #333;
    display: inline-block;
  }
</style>
